<template>
  <a-modal
    title="教室编辑"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['Id']" />
        </a-form-item>
        <a-form-item
          label="动态内容"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea
            v-decorator="['Content', {rules: [{required: true, message: '请填写动态内容'}]}]"
            class="dongtai-textarea"
            placeholder="请填写动态内容"
            autoSize
          />
        </a-form-item>

        
        <a-form-item
          label="发送班级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
        
          <a-select
            mode="multiple"
            allowClear
            placeholder="请至少选择一个班级！"
            v-decorator="['ClassIdList', {rules: [{required: true, message: '请至少选择一个班级！'}]}]"
          >
            <a-select-option
              v-for="item in classList"
              :key="item.id"
              :value="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="上传图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <div class="clearfix">
            <div v-if="ImageList.length">
              <div
                class="img-border-div"
                v-for="(item, index) in ImageList"
                :key="index"
              >
                <img
                  class="u-img"
                  :src="item.src"
                  alt="img"
                >
                <div class="img-b-div">
                  <a-icon
                    class="eye-a"
                    type="eye"
                    @click="handlePreview(item)"
                  />
                  <a-icon
                    class="delete-a"
                    type="delete"
                    @click="deleteImg(index)"
                  />
                </div>
              </div>
            </div>
            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :before-upload="beforeUpload"
            >
              <div v-if="ImageList.length < 9">
                <a-icon type="plus" />
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
            <a-modal
              :visible="previewVisible"
              :footer="null"
              @cancel="handlePreviewCancel"
            >
              <img
                alt="example"
                style="width: 100%"
                :src="previewImage"
              >
            </a-modal>
          </div>
        </a-form-item>

      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
  import { classDynamicEdit } from '@/api/modular/garden/classDynamicApi'

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        classList: [],
        
        previewVisible: false,
        previewImage: '',
        ImageList: []
      }
    },
    methods: {
      // 初始化方法
      edit (record) {
        this.
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(
            {
              Id: record.id,
              Content : record.Content,
              ClassIdList : record.ClassIdList,
            }
          )
        })
        // setTimeout(() => {
        // }, 100)
      },

      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true;
        validateFields((errors, values) => {
          if (!errors) {
            console.log(values)
            sysPosEdit(values).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      async beforeUpload(file, fileList){
            let src = await this.fileToBase64(file);
            file.src = src;
            // this.ImageList = [...this.ImageList, file];
            this.ImageList.push(file)
            // this.ImageList = fileList;
            return false;
        },
        fileToBase64(file){  
            return new Promise((resolve, reject) => {
                let reader = new FileReader();  
                reader.readAsDataURL(file);  
                reader.onload = function (e) {    
                    resolve(e.target.result)
                }
            })
            
        },
        handlePreviewCancel() {
          this.previewVisible = false;
        },
        async handlePreview(file) {
          if (!file.src && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
          }
          this.previewImage = file.src || file.preview;
          this.previewVisible = true;
        },
        deleteImg(index){
          this.ImageList.splice(index, 1)
        },
        handleChange({ fileList }) {
          this.ImageList = fileList;
        },
    }
  }
</script>
